<template>
    <div style="padding-top: 20px;">
        <el-form ref="formEl" :model="formInfo" label-width="130px" :rules="rules" :disabled="!isCanEdit"
            v-loading="formLoading">
            <el-form-item label="使用单位:" prop="usingUnit">
                <el-input v-model="detailsInfo.usingUnit" :disabled="true" style="width: 810px" />
            </el-form-item>
            <div class="flex-v">
                <el-form-item label="联系人:" prop="contacter">
                    <el-input v-model="detailsInfo.contacter" :disabled="true" style="width: 340px" />
                </el-form-item>
                <el-form-item label="联系电话:" prop="telNo">
                    <el-input v-model="detailsInfo.telNo" :disabled="true" style="width: 340px" />
                </el-form-item>
            </div>
            <!--<div class="flex-v">
                <el-form-item label="设备类别:" prop="className">
                    <el-input v-model="detailsInfo.className" style="width: 340px" />
                </el-form-item>
              <el-form-item label="检测设备:" prop="device">
                    <span>设备A、设备B</span>
                </el-form-item>
            </div> -->
            <div class="flex-v">
                <el-form-item label="执行标准:" prop="conductStandardName">
                    <el-select v-model="formInfo.conductStandardName" clearable style="width: 340px">
                        <el-option label="《电梯自行检测规则》标准(TSG T7008-2023)" value="《电梯自行检测规则》标准(TSG T7008-2023)" />
                    </el-select>
                </el-form-item>
                <el-form-item label="紧急程度:" prop="urgencyState">
                    <el-select v-model="formInfo.urgencyState" clearable style="width: 340px">
                        <el-option label="紧急" value="紧急" />
                        <el-option label="高" value="高" />
                        <el-option label="中" value="中" />
                        <el-option label="低" value="低" />
                    </el-select>
                </el-form-item>
            </div>
            <div class="flex-v">
                <el-form-item label="计划开始时间:" prop="planStartDate">
                    <el-date-picker v-model="formInfo.planStartDate" type="date" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" style="width: 340px" placeholder="请选择" />
                </el-form-item>
                <el-form-item label="计划结束时间:" prop="planFinishDate">
                    <el-date-picker v-model="formInfo.planFinishDate" type="date" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" style="width: 340px" placeholder="请选择" />
                </el-form-item>
            </div>

            <el-form-item label="现场负责人:" prop="detectionHeadWorker">
                <PersonSelect :defaultList='formInfo.leaderDefaultList' :noSelect="!isCanEdit" :isNecessary="true"
                    @updateList="updateLeaderList" />
            </el-form-item>
            <el-form-item label="检测员:" prop="detectionStaffWorkers">
                <PersonSelect :defaultList='formInfo.workerDefaultList' :noSelect="!isCanEdit" :isNecessary="true"
                    @updateList="updateWorkerList" />
            </el-form-item>
        </el-form>
    </div>
</template>
   
<script setup>
import PersonSelect from '@/components/PersonSelect'

const formLoading = ref(false)
const formInfo = ref({})
const formEl = ref(null)

const checkLearders = (rule, value, callback) => {
    if (!formInfo.value.detectionHeadWorker || formInfo.value.detectionHeadWorker.length == 0) {
        callback(new Error('请选择'))
    } else {
        callback()
    }
}

const checkWOrkers = (rule, value, callback) => {
    if (!formInfo.value.detectionStaffWorkers || formInfo.value.detectionStaffWorkers.length == 0) {
        callback(new Error('请选择'))
    } else {
        callback()
    }
}

const rules = ref({
    urgencyState: [{ required: true, message: '请选择', trigger: 'change' }],
    planStartDate: [{ required: true, message: '请选择', trigger: 'change' }],
    planFinishDate: [{ required: true, message: '请选择', trigger: 'change' }],
    conductStandardName: [{ required: true, message: '请选择', trigger: 'change' }],
    conductStandardNo: [{ required: true, message: '请选择', trigger: 'change' }],
    detectionHeadWorker: [{ required: true, message: '请选择', validator: checkLearders, trigger: 'change' }],
    detectionStaffWorkers: [{ required: true, message: '请选择', validator: checkWOrkers, trigger: 'change' }],
})

const props = defineProps({
    detailsInfo: {
        type: Object,
        default: () => {
            return {}
        },
    },
    isCanEdit: {
        type: Boolean,
        default: true
    },
});

watch(() => props.detailsInfo, value => {
    setInfo()
})

const setInfo = () => {
    if (props.detailsInfo) {
        let tempInfo = JSON.parse(JSON.stringify(props.detailsInfo))

        if (tempInfo.headWorker) {
            if (tempInfo.headWorker.name) {
                tempInfo.leaderDefaultList = [tempInfo.headWorker]
            } else {
                tempInfo.leaderDefaultList = tempInfo.headWorker
            }
        }
        if (tempInfo.staffWorkerList) {
            if (tempInfo.staffWorkerList.name) {
                tempInfo.workerDefaultList = [tempInfo.staffWorkerList]
            } else {
                tempInfo.workerDefaultList = tempInfo.staffWorkerList
            }
        }
        formInfo.value = tempInfo
    }
}

setInfo()


//负责人更新
const updateLeaderList = (list) => {
    let str = []
    let names = []
    if (list) {
        list.map(item => {
            str.push(item.id)
            names.push(item.name)
        })
    }
    formInfo.value.detectionHeadWorker = str.join(',')
    formInfo.value.detectionHeadWorkerNames = names.join(',')
}

//检测员更新
const updateWorkerList = (list) => {
    let str = []
    let names = []
    if (list) {
        list.map(item => {
            str.push(item.id)
            names.push(item.name)
        })
    }
    formInfo.value.detectionStaffWorkers = str.join(',')
    formInfo.value.detectionStaffWorkersNames = names.join(',')
}

const getInputInfo = () => {
    return formInfo.value
}

const checkValid = (callBack) => {
    formEl.value.validate((valid) => {
        if (valid) {
            if (!formInfo.value.detectionHeadWorker || formInfo.value.detectionHeadWorker.length == 0
                || !formInfo.value.detectionStaffWorkers || formInfo.value.detectionStaffWorkers.length == 0) {
                callBack(false)
            } else {
                callBack(true)
            }
        } else {
            callBack(false)
        }
    })
}

defineExpose({
    getInputInfo,
    checkValid
})

</script>
  
<style scoped></style>